<template>
  <div>
    <form
      id="kendoBusiForm"
      ref="daily"
      v-kendo-validator="setup"
    >
      <table class="dailyTable">
        <tr>
          <td style="width:50px;font-weight:bold"><i
            style="color: red; font-size: 16px; vertical-align: middle;margin-right:5px"
          >*</i><span>姓名</span></td>
          <td style="width:150px">
            <kendo-multicolumncombobox
              v-model="tableValues.memberNo"
              name="姓名"
              :filter="'contains'"
              :data-source-ref="'PrjMemberDataSource'"
              :data-text-field="'memberName'"
              :data-value-field="'memberNo'"
              :auto-width="true"
              :auto-bind="true"
              :value-primitive="true"
              :required="true"

              :placeholder="'-请选择-'"
            >
              <kendo-datasource
                :ref="'PrjMemberDataSource'"
                :type="'json'"
                :server-filtering="false"
                :transport-read-url="'/service/prjMng/prjMemberMng/findPrjMemberList'"
                :transport-read-type="'POST'"
                :schema-data="function(response) {
                  if(typeof response.data === 'object'){
                    if(JSON.stringify(response.data) === '{}'){
                      return []
                    }
                  }
                  return response.data
                }"
              />
              <kendo-multicolumncombobox-column
                :key="1"
                :field="'relPrjNo'"
                :title="'所属项目'"
                :width="'180'"
              />
              <kendo-multicolumncombobox-column
                :key="2"
                :field="'memberNo'"
                :title="'项目成员编号'"
                :width="'120'"
              />
              <kendo-multicolumncombobox-column
                :key="3"
                :field="'memberName'"
                :title="'项目成员编号'"
                :width="'120'"
              />
            </kendo-multicolumncombobox>
          </td>
          <td style="width:80px;font-weight:bold"><i
            style="color: red; font-size: 16px; vertical-align: middle;margin-right:5px"
          >*</i><span>外包公司</span></td>
          <td style="white-space: nowrap;width:250px">
            <kendo-maskedtextbox
              id="companyName"
              v-model="tableValues.companyName"
              name="外包公司"
              placeholder=""
              style="width:100%"
              :required="true"
            />
          </td>
          <td style="width:60px;font-weight:bold">联系方式</td>
          <td style="width:220px">
            <kendo-maskedtextbox
              id="userTelNo"
              v-model="tableValues.userTelNo"
              name="联系方式"
              placeholder=""
            />
          </td>
          <td style="width:50px;font-weight:bold"><i
            style="color: red; font-size: 16px; vertical-align: middle;margin-right:5px"
          >*</i><span>日期</span></td>
          <td>
            <kendo-datepicker
              id="dailyDate"
              v-model="tableValues.dailyDate"
              name="日报日期"
              :min="new Date(1971, 1, 1)"
              :max="new Date(2099, 11, 30)"
              :format="'yyyy-MM-dd'"
              :culture="'zh-CN'"
              :required="true"
            />
          </td>
        </tr>
      </table>
      <table class="dailyTable">
        <tr>
          <td style="width:50px;" rowspan="2">全天</td>
          <td style="width:80px">时间</td>
          <td style="text-align:center">9:00-17:30</td>
        </tr>
        <tr>
          <td styel="width:70px"><i
            style="color: red; font-size: 16px; vertical-align: middle;margin-right:5px"
          >*</i><span>日报内容</span></td>
          <td>
            <editor
              id="dailyContent"
              v-model="tableValues.dailyContent"
              name="日报内容"
              :resizable-content="true"
              :resizable-toolbar="true"
              :value="tableValues.dailyContent"
              :rows="15"
              :required="true"
            />
          </td>
        </tr>
      </table>
      <table class="dailyTable">
        <tr>
          <td style="width:120px;" rowspan="2"><i
            style="color: red; font-size: 16px; vertical-align: middle;margin-right:5px"
          >*</i><span>当前进度是否延误</span></td>
          <td style="width:150px">
            <kendo-dropdownlist
              id="whetherDelay"
              v-model="tableValues.whetherDelay"
              name="是否逾期"
              :data-source-ref="'whetherDelay'"
              :data-text-field="'dictValNm'"
              :data-value-field="'dictVal'"
              :auto-bind="true"
              :auto-width="true"
              option-label="--请选择--"
              no-data-template="无数据"
              :required="true"
            >
              <kendo-datasource
                slot="kendo-datasource"
                :ref="'whetherDelay'"
                :type="'json'"
                :server-filtering="true"
                :transport-read-type="'POST'"
                :transport-read-url="'/service/sysMng/dict/findDictByTypeWithForm'"
                :transport-parameter-map="function(options, operation) {
                  if (operation !== 'read' && options.models) {
                    // eslint-disable-next-line no-undef
                    return { models: JSON.stringify(options.models) }
                  } else {
                    // eslint-disable-next-line no-undef
                    return JSON.stringify({dict: 'WHETHER_DELAY_CD'})
                  }
                }"
                :schema-data="function(response) {
                  if(typeof response.data === 'object'){
                    if(JSON.stringify(response.data) === '{}'){
                      return []
                    }
                  }
                  return response.data
                }"
              />
            </kendo-dropdownlist>
          </td>
          <td style="width:100px;"><i
            style="color: red; font-size: 16px; vertical-align: middle;margin-right:5px"
          >*</i><span>逾期天数(天)</span></td>
          <td style="width:180px;">
            <kendo-numerictextbox
              id="delayDays"
              v-model="tableValues.delayDays"
              name="逾期天数"
              :decimals="2"
              :min="0"
              :step="1"
              :restrict-decimals="false"
              :culture="'zh-CN'"
              :required="true"
              style="width:100%"
            />
          </td>
          <td style="width:80px;">延误原因</td>
          <td>
            <kendo-maskedtextbox
              id="name"
              v-model="tableValues.memberName"
              name="姓名"
              placeholder=""
              style="width:100%"
            />
          </td>
        </tr>
      </table>
      <table class="dailyTable">
        <tr>
          <td style="width:60px">需要的支持</td>
          <td>
            <editor
              id="neededSupport"
              v-model="tableValues.needSupport"
              name="需要的支持"
              :resizable-content="true"
              :resizable-toolbar="true"
              :value="tableValues.neededSupport"
              :rows="15"
            />
          </td>
          <td style="width:60px">明日工作计划</td>
          <td>
            <editor
              id="tomWorkPlan"
              v-model="tableValues.tomWorkPlan"
              name="明日工作计划"
              :resizable-content="true"
              :resizable-toolbar="true"
              :value="tableValues.tomWorkPlan"
              :rows="15"
            />
          </td>
        </tr>
      </table>
    </form>
    <div v-if="showBtn" style="text-align:center">
      <k-button style="margin-top:10px;margin-left:10px;" class="k-primary" :icon="'save'" @click="save(tableValues,validator)">保存</k-button>
      <k-button style="margin-top:10px;margin-left:10px;" class="k-primary" :icon="'save'" @click="exportDefaultResolution">生成PDF</k-button>
    </div>

  </div>
</template>

<script>
  import { Editor } from '@progress/kendo-editor-vue-wrapper'
  import { Button } from '@progress/kendo-buttons-vue-wrapper'
  import { savePDF } from '@progress/kendo-vue-pdf'
  import JSZip from 'jszip'
  window.JSZip = JSZip

  export default {
    components: {
      'editor': Editor,
      'k-button': Button
    },
    data() {
      return {
        showBtn: true,
        validator: '',
        setup: this.initFormValidateRules(),
        dialogName: this.$attrs ? (this.$attrs.data ? (this.$attrs.data.dialogName ? this.$attrs.data.dialogName : '') : '') : '',
        tableValues: {
          memberNo: '',
          companyName: '天阳宏业科技股份有限公司',
          userTelNo: '',
          dailyDate: new Date(),
          dailyContent: '',
          whetherDelay: '',
          delayDays: '0',
          delayReson: '',
          needSupport: '',
          tomWorkPlan: ''
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        // eslint-disable-next-line no-undef
        this.validator = kendo.jQuery(this.$refs['daily']).getKendoValidator()
      })
      if (this.$attrs && this.$attrs.data && this.$attrs.data.param) {
        const param = this.$attrs.data.param
        if (param) {
          this.tableValues = Object.assign(this.tableValues, this.deepCopy(param))
        }
      }
    },
    methods: {
      save(paramVal, validator) {
        this.$set(paramVal, 'dailyDate', this.dateFormat(this.tableValues.dailyDate, 'yyyy-MM-dd'))
        if (validator.validate()) {
          this.$post('/service/prjMng/prjMemberMng/savePrjMemberDaily', paramVal).then(res => {
            if (res.code !== 200) {
              this.$KendoNotify({
                title: '错误信息:' + res.code,
                message: res.message
              }, 'error')
            } else {
              this.showBtn = false
              this.$KendoNotify({
                title: '提示信息:',
                message: res.message
              }, 'success')
              this.$bus.emit('dialog' + `${this.dialogName}`, true)
            }
          })
        }
      },
      exportDefaultResolution: function() {
        savePDF(this.$refs.daily)
      },
      // 初始化自定义表单校验规则 (仅做正则和必输校验)
      initFormValidateRules() {
        const setUp = {
          rules: {
            required(input) {
              if (input[0]['required']) {
                const NAME = input.attr('name')
                if (input.is('[name=' + NAME + '') && input.val() !== '') {
                  return true
                } else {
                  return false
                }
              } else {
                return true
              }
            }
          },
          messages: {
            required: function(input) {
              const NAME = input.attr('name')
              return `${NAME} 是必输项！`
            }
          }
        }
        return setUp
      }
    }
  }
</script>

<style>
    .dailyTable{
        font-family: verdana,arial,sans-serif;
        font-size:12px;
        color:#333333;
        border-width: 1px;
        border-color: #666666;
        border-collapse: collapse;
        width: 100%;
    }
    .dailyTable th{
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #e6e6e6;
        background-color: #dedede;
    }
    .dailyTable  td {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #e6e6e6;
        background-color: #ffffff;
    }
    .dailyTable {
        font-family: "DejaVu Sans", "Arial", sans-serif;
        font-size: .9em;
    }
    @font-face {
      font-family: "DejaVu Sans";
      src: url("../../../Styles/iconfont/DejaVuSans.ttf") format("truetype");
    }
    @font-face {
      font-family: "DejaVu Sans";
      font-weight: bold;
      src: url("../../../Styles/iconfont/DejaVuSans.ttf") format("truetype");
    }
</style>
